<template>
  <div>
    <router-link v-show="showAbs"
                 class="header-abs" tag="div"
                 to="/">
      <div class="iconfont back-icon">&#xe665;</div>
    </router-link>
    <div v-show="!showAbs" :style="opacityStyle" class="header-fixed">
      <router-link to="/">
        <div class="header-left">
          <div class="iconfont back-icon">&#xe665;</div>
        </div>
      </router-link>
      <div>
        详情
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, onUnmounted, reactive, ref} from "vue";

export default {
  name: 'Header',
  setup() {
    const showAbs = ref(true)
    const opacityStyle = reactive({opacity: 0})

    function handleScroll() {
      const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        opacityStyle.opacity = opacity
        showAbs.value = false
      } else {
        showAbs.value = true
      }
    }

    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })
    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })

    return {showAbs, opacityStyle}
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/vaibles.styl"
.header-abs
  position absolute
  left .2rem
  top .2rem
  width .8rem
  height .8rem
  border-radius .4rem
  background rgba(0, 0, 0, .8)
  text-align center
  line-height .8rem

  .back-icon
    color #eaeaea
    font-size .4rem
    margin-left -.05rem

.header-fixed
  overflow hidden
  z-index 2
  position fixed
  top 0
  left 0
  right 0
  height $headerHeight
  line-height $headerHeight
  background #40f5a9
  text-align center
  color #ffffff
  font-size .32rem

  .header-left
    position absolute
    top 0
    left 0
    width: 1rem
    float: left

    .back-icon
      text-align center
      font-size .7rem
      color #ffffff
</style>
